import React, { useEffect, useState } from 'react'
import "../css/shop.css"
// import 'Times-vant/es/styles';
import { Swiper } from '@nutui/nutui-react'
// import { Times } from './Times'
import Countdown from "./Times"
import '@nutui/nutui-react/dist/style.css'

import Navlist from './Navlist'
import List from './List'
import axios from 'axios'
import { useNavigate } from 'react-router-dom'

export default function ShopHome() {
    let navigate = useNavigate()
    // 获取数据
    // 页面进入
    let id = '66ed5401c71bac8097976baa'
    localStorage.setItem("id", id)
    useEffect(() => {
        // 获取到本商铺的信息
        getlist()
    }, [])
    // 获取数据
    let getlist = async () => {
        let { data } = (await axios.get("/shops/getlist", { params: { id } })).data
        console.log(data)
    }

    // SCOLLFLAG
    let [scrollflag, setScrollflag] = useState(false)
    // 提醒
    let [btnFlag, setBtnFlag] = useState(false)
    // 倒计时
    const [targetDate, setTargetDate] = useState("2024-09-19T12:00:00.000Z")
    // 轮播图
    let arr = ["新款现时优惠", "新品上架", "限时折扣", "满减送"];
    const list = [
        sessionStorage.getItem("shopimg"),
        'https://img.axureshop.com/54/93/61/54936165943d4fa7998606ae0844d36e/images/%E5%9F%BA%E6%9C%AC%E4%BF%A1%E6%81%AF%E5%A1%AB%E5%86%99/p3.jpg',
        'https://img.axureshop.com/54/93/61/54936165943d4fa7998606ae0844d36e/images/%E5%9F%BA%E6%9C%AC%E4%BF%A1%E6%81%AF%E5%A1%AB%E5%86%99/p4.jpg',
        'https://img.axureshop.com/54/93/61/54936165943d4fa7998606ae0844d36e/images/%E5%BA%97%E9%93%BA%E9%A6%96%E9%A1%B5/u1937.jpg',
    ]
    const [current, setCurrent] = useState(1)
    const onChange = (e) => {
        setCurrent(e + 1)
    }
    //
    // 设置滚动事件
    window.onscroll = () => {
        let scrollTop = document.documentElement.scrollTop;
        if (scrollTop + 10 > 90) {
            setScrollflag(true)
        } else {
            setScrollflag(false)
        }
    }
    let searcharr = () => {
        navigate("/search")
    }
    return (
        <div className='shop_box'>
            {/* 固定的顶部菜单 */}
            {
                scrollflag ?
                    <div className='fixed_nav'>
                        <div>
                            <img src='https://img.axureshop.com/54/93/61/54936165943d4fa7998606ae0844d36e/images/%E5%95%86%E5%93%81%E8%AF%A6%E6%83%85/u1715.png'></img>
                        </div>
                        <div className='nav'>
                            <Navlist></Navlist>
                        </div>
                        <div onClick={searcharr} className='search'>
                            搜索
                        </div>
                    </div>
                    : ""
            }
            <div className='header_box'>
                {/* 小菜单导航 */}
                <div className='nav'>
                    <div onClick={searcharr} className='search'>
                        搜索
                    </div>
                    {
                        <Navlist></Navlist>
                    }
                </div>
                {/* 轮播图 */}
                <div className="demo-box">
                    <Swiper
                        style={{ height: "37.5rem" }}
                        autoPlay
                        interval={2000}
                        loop={true}
                        current={current}
                        onChange={onChange}
                        indicator={<div className="page">
                            <span className='text'>{arr[current - 1]}</span>
                            <span className='textbox'>{current}/4</span>
                        </div>}
                    >
                        {list.map((item, index) => {
                            return (
                                <Swiper.Item key={item}>
                                    <img style={{ width: "100%", height: "37.5rem" }} src={list[index]} alt={list[index]} draggable={false} />
                                </Swiper.Item>
                            )
                        })}
                    </Swiper>
                </div>
            </div>
            {/* 当季新品 */}
            <div className='newshop'>
                <div className='newshop_box'>
                    <img src='https://img.axureshop.com/54/93/61/54936165943d4fa7998606ae0844d36e/images/%E5%BA%97%E9%93%BA%E9%A6%96%E9%A1%B5/u1955.png'>
                    </img>
                    <div className='newshop_text'>
                        <p className='newshop_title'>当季新品  潮流搭配</p>
                        <div className='boxbox'>
                            <p className='newshop_yugao'>
                                <span>预告</span>
                            </p>
                            <div className='time'>
                                <Countdown targetDate={targetDate} />
                            </div>
                        </div>
                    </div>
                    {/* 开播提醒 */}
                    <div className='threebox'>
                        <div onClick={() => { setBtnFlag(!btnFlag) }} className={btnFlag ? "btnactive" : "btn"}>
                            {
                                btnFlag ? "取消提醒" : "开播提醒"
                            }
                        </div>
                    </div>
                </div>
            </div>
            {/* 优惠卷 */}
            <div className='coupon'>
                <p>优惠卷</p>
                <p className='zimutext'>COUPON</p>
            </div>
            {/* 优惠活动 */}
            <div className='activity'>
                <div className='activity_box'>
                    <p className='activity_box_title'>10</p>
                    <p className='activity_box_title2'>COUPON</p>
                    <p className='activity_box_title2'>满300元使用</p>
                </div>
                <div className='activity_box'>
                    <p className='activity_box_title'>20</p>
                    <p className='activity_box_title2'>COUPON</p>
                    <p className='activity_box_title2'>满600元使用</p>
                </div>
                <div className='activity_box'>
                    <p className='activity_box_title'>30</p>
                    <p className='activity_box_title2'>COUPON</p>
                    <p className='activity_box_title2'>满900元使用</p>
                </div>
            </div>
            {/* 分类 */}
            <div className='coupon'>
                <p>分类</p>
                <p className='zimutext'>CLASSFICATION</p>
            </div>
            {/* 四个分类框架 */}
            <div className='fourbox'>
                {/* 1 */}
                <div className='fourbox_box'>
                    <img src='https://img.axureshop.com/54/93/61/54936165943d4fa7998606ae0844d36e/images/%E5%BA%97%E9%93%BA%E9%A6%96%E9%A1%B5/u1920.png'></img>
                    <div className='fourbox_box_text'>
                        <p>耳饰</p>
                        <p>EARRINGS</p>
                    </div>
                </div>
                {/* 2 */}
                <div className='fourbox_box'>
                    <img src='https://img.axureshop.com/54/93/61/54936165943d4fa7998606ae0844d36e/images/%E5%BA%97%E9%93%BA%E9%A6%96%E9%A1%B5/u1929.png'></img>
                    <div className='fourbox_box_text'>
                        <p>项链</p>
                        <p>NECKLACE</p>
                    </div>
                </div>
                {/* 3 */}
                <div className='fourbox_box'>
                    <img src='https://img.axureshop.com/54/93/61/54936165943d4fa7998606ae0844d36e/images/%E5%BA%97%E9%93%BA%E9%A6%96%E9%A1%B5/u1926.png'></img>
                    <div className='fourbox_box_text'>
                        <p>手链</p>
                        <p>BRACELET</p>
                    </div>
                </div>
                {/* 4 */}
                <div className='fourbox_box'>
                    <img src='https://img.axureshop.com/54/93/61/54936165943d4fa7998606ae0844d36e/images/%E5%BA%97%E9%93%BA%E9%A6%96%E9%A1%B5/u1923.png'></img>
                    <div className='fourbox_box_text'>
                        <p>戒指</p>
                        <p>RING</p>
                    </div>
                </div>
                {/* 商品列表 */}
                <div className='shoplist'>
                    {/*  */}
                    <div className='coupon backgr'>
                        <p>店铺推荐</p>
                        <p className='zimutext'>RECOMMENDATION</p>
                    </div>
                    {/* 列表 */}
                    <List id={localStorage.getItem('id')}></List>
                </div>
            </div>
        </div>
    )
}
